<template>
  <div class="shopping-cart-page">
    <HeaderNav title="购物车"></HeaderNav>
    <yd-tab>
      <yd-tab-panel label="全部">
        <yd-list theme="4">
          <yd-list-item v-for="item in goodListsAlllists" :key="item.id">
            <img slot="img" :src="item.img" @click="goGoodDetail(item.id)">
            <span slot="title">{{item.title}}</span>
            <yd-list-other slot="other">
              <div>
                <span class="demo-list-price"><em>¥</em>{{item.price}}</span>
                <span class="demo-list-del-price">¥{{item.w_price}}</span>
              </div>
            </yd-list-other>
            <yd-list-other slot="other" style="justify-content: flex-start;">
              <yd-button class="button" @click.native="goLogistics(item.id)" type="primary">查看物流</yd-button>
              <yd-button v-if="item.goodType === 1" class="button" @click.native="goPay" type="primary">去付款</yd-button>
              <yd-button v-if="item.goodType === 2" class="button" @click.native="goCollect" type="primary">去收货</yd-button>
              <yd-button v-if="item.goodType === 3" class="button" @click.native="goEvaluate" type="primary">去评价</yd-button>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
      </yd-tab-panel>
      <yd-tab-panel label="未付款">
        <yd-list theme="4">
          <yd-list-item v-for="item in goodListsPaylists" :key="item.id">
            <img slot="img" :src="item.img" @click="goGoodDetail(item.id)">
            <span slot="title">{{item.title}}</span>
            <yd-list-other slot="other">
              <div>
                <span class="demo-list-price"><em>¥</em>{{item.price}}</span>
                <span class="demo-list-del-price">¥{{item.w_price}}</span>
              </div>
            </yd-list-other>
            <yd-list-other slot="other" style="justify-content: flex-start;">
              <yd-button class="button" @click.native="goLogistics(item.id)" type="primary">查看物流</yd-button>
              <yd-button class="button" @click.native="goPay" type="primary">去付款</yd-button>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
      </yd-tab-panel>
      <yd-tab-panel label="未收货">
        <yd-list theme="4">
          <yd-list-item v-for="item in goodListsCollectlists" :key="item.id">
            <img slot="img" :src="item.img" @click="goGoodDetail(item.id)">
            <span slot="title">{{item.title}}</span>
            <yd-list-other slot="other">
              <div>
                <span class="demo-list-price"><em>¥</em>{{item.price}}</span>
                <span class="demo-list-del-price">¥{{item.w_price}}</span>
              </div>
            </yd-list-other>
            <yd-list-other slot="other" style="justify-content: flex-start;">
              <yd-button class="button" @click.native="goLogistics(item.id)" type="primary">查看物流</yd-button>
              <yd-button class="button" @click.native="goCollect" type="primary">去收货</yd-button>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
      </yd-tab-panel>
      <yd-tab-panel label="未评价">
        <yd-list theme="4">
          <yd-list-item v-for="item in goodListsEvaluatelists" :key="item.id">
            <img slot="img" :src="item.img" @click="goGoodDetail(item.id)">
            <span slot="title">{{item.title}}</span>
            <yd-list-other slot="other">
              <div>
                <span class="demo-list-price"><em>¥</em>{{item.price}}</span>
                <span class="demo-list-del-price">¥{{item.w_price}}</span>
              </div>
            </yd-list-other>
            <yd-list-other slot="other" style="justify-content: flex-start;">
              <yd-button class="button" @click.native="goLogistics(item.id)" type="primary">查看物流</yd-button>
              <yd-button class="button" @click.native="goEvaluate" type="primary">去评价</yd-button>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
      </yd-tab-panel>
    </yd-tab>
  </div>
</template>
<script>
import HeaderNav from '_c/HeaderNav'
export default {
  name: 'ShoppingCart',
  components: {
    HeaderNav
  },
  data () {
    return {
      checklistAll: [],
      goodListsAlllists: [
        {id: 1, img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg", title: "标题111标题标题标题标题", price: 156.23, w_price: 89.36, goodType: 1},
        {id: 2, img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg", title: "标题222标题标题标题标题", price: 256.23, w_price: 89.36, goodType: 2},
        {id: 3, img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg", title: "标题333标题标题标题标题", price: 356.23, w_price: 89.36, goodType: 3},
        {id: 4, img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg", title: "标题444标题标题标题标题", price: 456.23, w_price: 89.36, goodType: 1},
        {id: 5, img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg", title: "标题555标题标题标题标题", price: 556.23, w_price: 89.36, goodType: 2},
        {id: 6, img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg", title: "标题666标题标题标题标题", price: 656.23, w_price: 89.36, goodType: 3}
      ],
      goodListsPaylists: [],
      goodListsCollectlists: [],
      goodListsEvaluatelists: []
    }
  },
  mounted() {
    this.goodsClass()
  },
  methods: {
    goGoodDetail (id) {
      this.$router.push({
        path: '/good_detail',
        query: {
          id
        }
      })
    },
    goLogistics (id) {
      this.$router.push({
        path: '/logistics_history',
        query: {
          id
        }
      })
    },
    goPay () {
      this.$dialog.alert({mes: '去付款！'})
    },
    goCollect () {
      this.$dialog.alert({mes: '去收货！'})
    },
    goEvaluate () {
      this.$dialog.alert({mes: '去评价！'})
    },
    goodsClass () {
      const dataAll = this.goodListsAlllists
      this.goodListsPaylists = dataAll.filter(item => item.goodType === 1)
      this.goodListsCollectlists = dataAll.filter(item => item.goodType === 2)
      this.goodListsEvaluatelists = dataAll.filter(item => item.goodType === 3)
    }
  }
}
</script>
<style lang="less" scoped>
.demo-list-price {
  font-size: .3rem;
  color: #eb5211;
}
.demo-list-del-price {
  padding-left: .06rem;
  font-size: .2rem;
  margin-left: .02rem;
  position: relative;
  color: #8c8c8c
}
.button {
  margin-right: .1rem;
}
</style>
